<template>
    <div class='container'>
        <div class="search-container">
            <t-input v-model="search" placeholder="搜索" class="search-input" @enter="handleEnter" />
        </div>
        <div class="table-container">
            <t-table row-key="id" :columns="columns" :data="emptyData ? [] : data" :hover="true" size="small"
                :expanded-row-keys="expandedRowKeys" :expand-on-row-click="expandOnRowClick" :expand-icon="expandIcon"
                @expand-change="handleExpandChange" :pagination="pagination">

                <!-- 标签列 -->
                <template #tags="{ row }">
                    <t-tag v-for="tag in row.tags" :key="tag" class="tag" size="small"> {{ tag }}</t-tag>
                </template>

                <!-- 展开行内容（核心） -->
                <template #expandedRow="{ row }">
                    <div class="more-detail">
                        app萨电话
                    </div>
                </template>
            </t-table>
        </div>
    </div>
</template>
<script setup lang='ts'>
import { ref, computed, onMounted } from 'vue';
import type { TableProps } from 'tdesign-vue-next';
import { MessagePlugin } from 'tdesign-vue-next';
import { findHistoryActionAPI } from '@/api/subject_history';

const search = ref("")

const handleEnter = async () => {
    const res = await findHistoryActionAPI({ action: search.value });
    // @ts-ignore
    if (res.code === 200) {
        // @ts-ignore
        data.value = res.data.result;
        // @ts-ignore
        pagination.value.total = res.data.total;
    } else {
        // @ts-ignore
        MessagePlugin.error(`查询失败：${res.msg}`);
    }
}
// 表格内容区


type DataType = {
    year: number;
    action: string;
    tags: string[];
    create_at: string;
    update_at: string;
}
const data = ref<DataType[]>([]);

// 响应式状态
const expandOnRowClick = ref(false);
const expandedRowKeys = ref<string[]>([]);
const emptyData = ref(false);

// 列配置（纯模板友好，无 render 函数）
const columns = computed<TableProps['columns']>(() => [
    { colKey: 'year', title: '年份', width: 40, ellipsis: true },
    { colKey: 'action', title: '事件', width: 400, ellipsis: true },
    { colKey: 'tags', title: '标签', width: 100, ellipsis: true },
    { colKey: 'create_at', title: '创建时间', width: 100, ellipsis: true },
    { colKey: 'update_at', title: '更新时间', width: 100, ellipsis: true },
]);


const pagination = ref<TableProps['pagination']>({
    defaultCurrent: 1,
    defaultPageSize: 10,
    total: 0,
});
// expandIcon 控制
const expandIcon = ref<TableProps['expandIcon']>(true);

// 展开状态变更
const handleExpandChange = (keys: string[]) => {
    expandedRowKeys.value = keys;
};

// 操作点击
const handleClickOp = (row: any) => {
    console.log('点击操作行:', row);
};

onMounted(async () => {
    const res = await findHistoryActionAPI({});
    // @ts-ignore
    if (res.code === 200) {
        // @ts-ignore
        data.value = res.data.result;
        // @ts-ignore
        pagination.value.total = res.data.total;
    } else {
        // @ts-ignore
        MessagePlugin.error(`查询失败：${res.msg}`);
    }
})

</script>
<style lang='scss' scoped>
.container {
    // background-color: #dbd6d6;
    // border-radius: 5px;
    width: 90%;
    margin: 0 auto;
}
</style>